/*
 * @Author: lusx 
 * @Date: 2020-05-22 16:46:56 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-26 11:16:23
 */
import React from 'react';
import { inject, observer } from 'mobx-react';
import { Tabs } from 'weaver-mobile';
import { toJS } from 'mobx';
import Chart from './chart';
import CardFoot from './cardFoot';
import Number from './number';
const tabs2 = [
    { title: '办结率' },
    { title: '逾期率' },
    { title: '反馈率' },
    { title: '延期率' },
];
@inject('overallStore')
@observer
export default class Overall extends React.Component {
    constructor(props) {
        super(props);
        this.state = { actionTab: 0 };
    }
    componentDidMount() {
        const params = {
            type: 0,
            searchConfig: 0,
            isContain: 0,
        }
        this.props.overallStore.getProjectCount(params);
    }
    render() {
        const { match: { path, url }, history: { push }, location: { pathname }, overallStore: { pies, count0, cardFootData } } = this.props;
        const { actionTab } = this.state;
        const datas = pies.length > 0 && pies.map((item, index) => {
            return {
                option: this.templateFun(item, index)
            }
        });
        return (
            <div className='gv-overall'>
                <Tabs tabs={tabs2}
                    initialPage={0}
                    onChange={(tab, actionTab) => { this.setState({ actionTab }) }}
                />
                {count0.length > 0 && <Number datas={count0} />}
                {pies.length > 0 && <Chart actionTab={actionTab} datas={datas} />}
                {cardFootData.length > 0 && <CardFoot actionTab={actionTab} datas={cardFootData} />}
            </div>
        )
    }
    templateFun = (item = {}, index) => {
        const option = {
            series: [
                {
                    name: '业务指标',
                    type: 'gauge',
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length: 15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 14.8,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title: {
                        color: '#F2A945',
                        fontSize: '14.7'
                    },
                    detail: { formatter: '{value}%' },
                    data: [{ value: item.value || 0, name: item.text || '' }]
                }
            ]
        }
        return option;
    }
}